{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}琢越网{% endblock %}

{% block custom_js %}<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>{% endblock %}
{% block custom_css %}<link rel="stylesheet" href="{% static 'css/mystyle.css' %}">{% endblock %}

{% block content %}
    <div class="row clearfix">
				<div class="col-md-1 column">  <!次导航>
					<ul class="nav nav-pills">
						<li class="active">
							 <a href="{% url 'topic:index' %}" >话题</a></li>
						<li>
							 <a href="{% url 'note:index-note' %}">笔记</a>
						</li>
					</ul>
				</div>
				<div id="middleBox" class="col-md-8 column col-div"> <!话题展示区>
					<p></p>
					<div class="row clearfix"> <!功能选择按钮>
						<div class="col-sm-offset-2 col-md-3 column">
							 <a href="{% url 'note:note_edit' %}" role="button" class="btn orange-button">
								<span class="glyphicon glyphicon-pencil" ></span>写笔记</a>
						</div>
						<div class="col-md-3 column">
							<a href="{% url 'topic:topic_edit' %}" role="button" class="btn orange-button">
								<span class="glyphicon glyphicon-send"></span>发话题</a>
						</div>
						<div class="col-md-3 column">
							<a href="#" role="button" class="btn orange-button">回答</a>
						</div>
{#                        <div class="col-md-3 column">#}
{#							<a href="{% url 'topic:test' %}" role="button" class="btn orange-button">测试</a>#}
{#						</div>#}
                    </div>
					<p></p>
					<hr>
					<label>请选择排序方式:</label>
					 <a role="button" class="btn"  >查看最新</a>
					 <a role="button" class="btn"  >自动推荐</a>
					<br>
					<label>分类:</label>
                    {% for label in labels %}
					<a role="button" class="btn" style="text-decoration:none;color:black;">{{ label.label_content }}</a>
					{% endfor %}
					<hr>
                    {% for topic in topics %}
					<div  class="row row-mar-lg clearfix"><!话题展示1>

						<div class="media" style="margin:10px 10px 5px 10px">

                            {% for label in topic.topic_label.all %}
							<span class="label label-warning">{{ label.label_content }}</span>
                            {% endfor %}

                            <p class="pull-right tool">{{ topic.published_time }}</p> <!!!>
							<p class="pull-right tool">发表于：</p>
							<a href="{% url 'topic:topic_page' topic.id %}" target=_blank style="text-decoration:none;color:black;">
								<h4 class="col-h4">{{ topic.topic_title }}</h4>
								<p>{{ topic.topic_content }}</p>
							</a>
							 <a onclick="collect()" role="button" class="btn tool" data-toggle="modal">
								<span class="glyphicon glyphicon-star" ></span>收藏
							</a>
							<a onclick="copyUrl()" role="button" class="btn tool" data-toggle="modal">
								<span class="glyphicon glyphicon-link" >分享
							</a>
							<a href="#modal-container-tip-off" role="button" class="btn tool" data-toggle="modal">
								<span class="glyphicon glyphicon-exclamation-sign" >举报
							</a>
							<!举报模态框>
							<div class="modal fade" id="modal-container-tip-off" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header"> <!头>
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
											<h4 class="modal-title" id="myModalLabel">举报</h4>
										</div>
										<div class="modal-body"> <!中间部分>
											<textarea class="form-control" style="height:200px" placeholder="请填写举报信息"></textarea>
										</div>
										<div class="modal-footer"> <!脚>
											<button type="button" class="btn btn-primary" data-dismiss="modal">提交</button>
										</div>
									</div>
								</div>
							</div>
							<a role="button" class="but-click btn tool" data-toggle="modal">
								<span class="glyphicon glyphicon-pencil" >评论
							</a>
							<p class="pull-right tool" style="">{{ topic.topic_reading_quantity }}</p> <!!!>
							<label class="pull-right tool">浏览：</label>
							<p class="pull-right tool">xxx</p> <!!!>
							<label class="pull-right tool">收藏：</label>

							<a href="#" class="pull-right tool" target=_blank style="text-decoration:none;color:black;"><p class="tool">{{ topic.userprofile_id }}</p><a>
							<a href="#" class="pull-right" target=_blank><img src="{% static 'img/man2.png' %}"  width=40px height=40px/></a>
                        </div>
						<div  class="remark-div" style="display:none" > <!评论框>
							<textarea class="form-control" width=100% style="margin:5px 0px 5px 0px" placeholder="请写下您的评论"></textarea>
							<button type="submit" class="btn btn-default pull-right publish">发表</button>
						</div>
						<hr style="border:1 dashed #987cb9" width="90%"color=#987cb9 SIZE=1>
					</div>
					{% endfor %}
				</div>
				<div class="col-md-3 column"> <!右部分>
					<div id="userInformation" class="row clearfix col-div" >	<!用户信息（未登录前设其style="dispaly:none"）>
						<a class="btn big-but pull-left" href="#">
							<img alt="140x140" class="img" src="{% static 'img/man2.png' %}" width=50% style="margin-top:10px">
						</a>
						<h4 style="text-align:center">{{ user.username }}</h4>
						<p style="color:gray;text-align:center">{{ user.introduction }}</p>
						<a class="btn big-but pull-left" href="{% url 'users:user_info' %}">个人中心</a>
						<a class="btn big-but pull-right" href="{% url 'logout' %}">退出登录</a>
					</div>
					<div class="row row-mar-lg clearfix col-div"> <!推荐用户>
						<h4 class="text-center col-h4">推荐用户</h4>
						<hr>
						<div class="right-div">
							<img src="/static/img/2.jpg" width=40px height=40px/>
							<a href="#" class="right-text">{{ user.username }}</a>
							<button class="btn-link pull-right" style="text-decoration:none"><p style="font-size:14px;color:#525252;font-weight:bold">+关注</p></button>
						</div>

					</div>

				</div>
	</div>
{% endblock %}
{% block custom_script %}
    <script>
    // -对评论框的控制-
	$(document).ready(function(){
		var div;
		// 显示or隐藏评论框
		$(".but-click").click(function(){
			div= $(this).parent("div").parent("div").find(".remark-div"); //取button的div父级d的div父级，再通过.remark-div类找到评论框
			var display = div.css("display");
			if( display=="none")
				div.css("display","block");
			else
				div.css("display","none");
			//div[0].style.display = "block"; //设置div的style为可见
		});
		// 判断评论是否有效
		$(".publish").click(function(){
			var comment =  $(this).parent("div").find("textarea")[0].value;
			console.log(comment);
			/*if( typeof(comment)=="undefined" || comment=="")
				alert("评论为空！");
			else{
				div.css("display","none");
				alert("发表成功!");
			}*/
		});
	});
	//var collectFlag = 1;
	function collect(){  // 二次点击怎么取消？？
		alert("收藏成功!")
	/*	if( collectFlag==1){

			collectFlag = 2;
		}
		else{
			alert("已取消收藏!")
			collectFlag = 1;
		}
	*/
	}
	function copyUrl()
   {
		var clipBoardContent=this.location.href;  // 这个方法firefox会报错！IE适用
		window.clipboardData.setData("Text",clipBoardContent);
		alert("文章链接复制成功!");
   }
   /* //通用的copy方法？？
   function copyUrl()
   {
		var clipBoardContent=this.location.href;
		//window.clipboardData.setData("Text",clipBoardContent);
		if (window.clipboardData)
			window.clipboardData.setData("Text", clipBoardContent);
		else if (window.netscape){
			netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
			var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
			if (!clip)
				return;
			var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
			if (!trans)
				return;
			trans.addDataFlavor('text/unicode');
			var str = new Object();
			var len = new Object();
			var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
			var copytext=clipBoardContent;
			str.data=copytext;
			trans.setTransferData("text/unicode",str,copytext.length*2);
			var clipid=Components.interfaces.nsIClipboard;
			if (!clip)
				return false;
			clip.setData(trans,null,clipid.kGlobalClipboard);
		}
		alert("复制成功!");
	} */

</script>
{% endblock %}